<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PGYer应用商店</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        :root {
            --primary: #3498db;
            --secondary: #2c3e50;
            --accent: #e74c3c;
            --light: #ecf0f1;
            --dark: #34495e;
            --success: #2ecc71;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            padding: 20px;
            color: var(--dark);
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
            margin-bottom: 30px;
            border-bottom: 2px solid rgba(0, 0, 0, 0.1);
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .logo i {
            font-size: 2.5rem;
            color: var(--primary);
        }
        
        .logo h1 {
            font-size: 2rem;
            font-weight: 700;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .search-bar {
            display: flex;
            align-items: center;
            background: white;
            border-radius: 50px;
            padding: 8px 20px;
            box-shadow: var(--shadow);
            width: 350px;
        }
        
        .search-bar input {
            border: none;
            outline: none;
            padding: 10px;
            width: 100%;
            font-size: 1rem;
            background: transparent;
        }
        
        .search-bar i {
            color: var(--primary);
            font-size: 1.2rem;
        }
        
        .user-actions {
            display: flex;
            gap: 15px;
        }
        
        .btn {
            padding: 10px 20px;
            border-radius: 50px;
            border: none;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .btn-primary {
            background: var(--primary);
            color: white;
        }
        
        .btn-secondary {
            background: var(--light);
            color: var(--dark);
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow);
        }
        
        .btn:active {
            transform: translateY(1px);
        }
        
        .tabs {
            display: flex;
            gap: 15px;
            margin-bottom: 30px;
        }
        
        .tab {
            padding: 12px 25px;
            background: white;
            border-radius: 50px;
            cursor: pointer;
            font-weight: 600;
            box-shadow: var(--shadow);
            transition: all 0.3s ease;
        }
        
        .tab.active {
            background: var(--primary);
            color: white;
        }
        
        .tab:hover:not(.active) {
            background: var(--light);
        }
        
        .app-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 25px;
            margin-top: 20px;
        }
        
        .app-card {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
        }
        
        .app-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
        }
        
        .app-image {
            height: 180px;
            background: linear-gradient(45deg, #3498db, #2c3e50);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        
        .app-image img {
            max-width: 80px;
            max-height: 80px;
            border-radius: 20px;
        }
        
        .app-badge {
            position: absolute;
            top: 15px;
            right: 15px;
            background: var(--accent);
            color: white;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
        }
        
        .app-content {
            padding: 20px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        
        .app-title {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 8px;
        }
        
        .app-developer {
            color: #7f8c8d;
            font-size: 0.9rem;
            margin-bottom: 15px;
        }
        
        .app-description {
            color: #34495e;
            font-size: 0.95rem;
            margin-bottom: 20px;
            flex-grow: 1;
        }
        
        .app-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            font-size: 0.9rem;
        }
        
        .app-version {
            background: var(--light);
            padding: 3px 10px;
            border-radius: 15px;
        }
        
        .app-size {
            color: #7f8c8d;
        }
        
        .download-btn {
            background: var(--success);
            color: white;
            text-align: center;
            padding: 12px;
            border-radius: 12px;
            font-weight: 600;
            text-decoration: none;
            display: block;
            transition: all 0.3s ease;
        }
        
        .download-btn:hover {
            background: #27ae60;
            transform: scale(1.02);
        }
        
        .loading {
            text-align: center;
            padding: 50px 0;
            font-size: 1.2rem;
            color: var(--dark);
        }
        
        .loading i {
            font-size: 2rem;
            margin-bottom: 15px;
            color: var(--primary);
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        footer {
            text-align: center;
            margin-top: 50px;
            padding: 20px;
            color: #7f8c8d;
            font-size: 0.9rem;
        }
        
        @media (max-width: 768px) {
            header {
                flex-direction: column;
                gap: 20px;
            }
            
            .search-bar {
                width: 100%;
            }
            
            .tabs {
                overflow-x: auto;
                padding-bottom: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="logo">
                <i class="fas fa-mobile-alt"></i>
                <h1>PGYer应用商店</h1>
            </div>
            
            <div class="search-bar">
                <i class="fas fa-search"></i>
                <input type="text" id="searchInput" placeholder="搜索应用...">
            </div>
            
            <div class="user-actions">
                <button class="btn btn-secondary">
                    <i class="fas fa-user"></i> 账户
                </button>
                <button class="btn btn-primary">
                    <i class="fas fa-download"></i> 我的应用
                </button>
            </div>
        </header>
        
        <div class="tabs">
            <div class="tab active">全部应用</div>
            <div class="tab">热门应用</div>
            <div class="tab">最新上架</div>
            <div class="tab">iOS应用</div>
            <div class="tab">Android应用</div>
        </div>
        
        <div id="appContainer" class="app-grid">
            <!-- 应用卡片将通过JavaScript动态生成 -->
            <div class="loading">
                <i class="fas fa-spinner"></i>
                <p>正在加载应用数据...</p>
            </div>
        </div>
        
        <footer>
            <p>© 2023 PGYer应用商店 | 使用PGYer API提供应用数据</p>
        </footer>
    </div>

    <script>
        // 模拟从PGYer API获取的数据
        const mockApps = [
            {
                name: "微信",
                developer: "腾讯科技",
                description: "微信，超过10亿人使用，能够通过网络给好友发送文字消息、表情和图片，还可以传送文件，与朋友视频聊天，让你的沟通更方便。",
                version: "8.0.38",
                size: "255.6 MB",
                icon: "https://via.placeholder.com/100/3498db/ffffff?text=WX",
                platform: "iOS",
                downloads: "1.2亿",
                rating: 4.8,
                shortcutUrl: "https://www.pgyer.com/wechat"
            },
            {
                name: "支付宝",
                developer: "蚂蚁金服",
                description: "支付宝是服务全球12亿用户的数字生活开放平台，支持支付、理财、生活服务、政务服务、公益等多个场景与行业的服务。",
                version: "10.3.86",
                size: "210.3 MB",
                icon: "https://via.placeholder.com/100/e74c3c/ffffff?text=AP",
                platform: "Android",
                downloads: "9800万",
                rating: 4.7,
                shortcutUrl: "https://www.pgyer.com/alipay"
            },
            {
                name: "抖音",
                developer: "字节跳动",
                description: "记录美好生活！抖音是一个帮助用户表达自我，记录美好生活的短视频平台。超多明星在这里等你，更多精彩内容等你发现。",
                version: "25.8.0",
                size: "315.7 MB",
                icon: "https://via.placeholder.com/100/2c3e50/ffffff?text=DY",
                platform: "iOS",
                downloads: "2.3亿",
                rating: 4.6,
                shortcutUrl: "https://www.pgyer.com/douyin"
            },
            {
                name: "高德地图",
                developer: "阿里巴巴",
                description: "高德地图拥有全面的地点信息，特色语音导航、智能路线规划；省流量、耗电低、空间占用小、体验流畅，是您贴心的生活助手。",
                version: "12.05.00",
                size: "185.9 MB",
                icon: "https://via.placeholder.com/100/2ecc71/ffffff?text=AM",
                platform: "Android",
                downloads: "8700万",
                rating: 4.7,
                shortcutUrl: "https://www.pgyer.com/amap"
            },
            {
                name: "网易云音乐",
                developer: "网易",
                description: "网易云音乐是一款专注于发现与分享的音乐产品，依托专业音乐人、DJ、好友推荐及社交功能，为用户打造全新的音乐生活。",
                version: "8.9.80",
                size: "220.4 MB",
                icon: "https://via.placeholder.com/100/9b59b6/ffffff?text=MC",
                platform: "iOS",
                downloads: "7600万",
                rating: 4.9,
                shortcutUrl: "https://www.pgyer.com/music"
            },
            {
                name: "小红书",
                developer: "行吟信息",
                description: "小红书是一个生活方式平台和消费决策入口，通过机器学习对信息和人进行精准、高效匹配。在这里发现美好、真实、多元的世界。",
                version: "7.52.0",
                size: "245.8 MB",
                icon: "https://via.placeholder.com/100/e74c3c/ffffff?text=RED",
                platform: "Android",
                downloads: "1.1亿",
                rating: 4.5,
                shortcutUrl: "https://www.pgyer.com/xiaohongshu"
            },
            {
                name: "哔哩哔哩",
                developer: "哔哩哔哩",
                description: "哔哩哔哩是国内知名的视频弹幕网站，这里有最及时的动漫新番，最棒的ACG氛围，最有创意的Up主。",
                version: "7.25.0",
                size: "198.6 MB",
                icon: "https://via.placeholder.com/100/00a1d6/ffffff?text=B",
                platform: "iOS",
                downloads: "8900万",
                rating: 4.8,
                shortcutUrl: "https://www.pgyer.com/bilibili"
            },
            {
                name: "钉钉",
                developer: "阿里巴巴",
                description: "钉钉是阿里巴巴集团专为企业打造的一个工作商务沟通、协同、智能移动办公平台，帮助数千万企业降低沟通、协同、管理成本。",
                version: "7.0.25",
                size: "230.1 MB",
                icon: "https://via.placeholder.com/100/3498db/ffffff?text=DD",
                platform: "Android",
                downloads: "6500万",
                rating: 4.4,
                shortcutUrl: "https://www.pgyer.com/dingtalk"
            }
        ];

        // 渲染应用卡片
        function renderApps(apps) {
            const appContainer = document.getElementById('appContainer');
            appContainer.innerHTML = '';
            
            apps.forEach(app => {
                const appCard = document.createElement('div');
                appCard.className = 'app-card';
                
                appCard.innerHTML = `
                    <div class="app-image">
                        <img src="${app.icon}" alt="${app.name}">
                        <div class="app-badge">${app.platform}</div>
                    </div>
                    <div class="app-content">
                        <h3 class="app-title">${app.name}</h3>
                        <div class="app-developer">${app.developer}</div>
                        <p class="app-description">${app.description}</p>
                        <div class="app-meta">
                            <span class="app-version">v${app.version}</span>
                            <span class="app-size">${app.size}</span>
                        </div>
                        <a href="${app.shortcutUrl}" class="download-btn">
                            <i class="fas fa-download"></i> 免费下载
                        </a>
                    </div>
                `;
                
                appContainer.appendChild(appCard);
            });
        }

        // 模拟API请求延迟
        setTimeout(() => {
            renderApps(mockApps);
        }, 1500);

        // 搜索功能
        const searchInput = document.getElementById('searchInput');
        searchInput.addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase();
            if (searchTerm === '') {
                renderApps(mockApps);
                return;
            }
            
            const filteredApps = mockApps.filter(app => 
                app.name.toLowerCase().includes(searchTerm) || 
                app.developer.toLowerCase().includes(searchTerm) ||
                app.description.toLowerCase().includes(searchTerm)
            );
            
            renderApps(filteredApps);
        });

        // 标签切换功能
        const tabs = document.querySelectorAll('.tab');
        tabs.forEach(tab => {
            tab.addEventListener('click', function() {
                tabs.forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                
                // 在实际应用中，这里会根据标签过滤数据
                renderApps(mockApps);
            });
        });
    </script>
</body>
</html>